<template>
  <div class="fix-block">
    <!-- 顶部搜索 -->
    <div class="top-search flex-between">
      <p>会管家</p>
      <img src="../../assets/img/house/search-green.png" alt="" @click="toSearch">
    </div>
    <div class="flex new-filter">
      <p v-for="(val,key) in filterList" :key="key" @click="filter(val)" :class="{active:filterSelect==val.id}"
         class="filter-title">
        {{val.name}}</p>
    </div>
  </div>
</template>
<style lang="less" rel="stylesheet/less" scoped>
  .fix-block {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    background: #fff;
  }

  /* 顶部搜索 */
  .top-search {
    box-sizing: content-box;
    padding: .18rem .18rem .18rem .2rem;
    height: .33rem;
    p {
      font-size: .24rem;
      color: #333333;
      font-weight: bold;
    }
    img {
      width: .25rem;
      height: .24rem;
    }
  }

  /* 新的过滤 */
  .new-filter {
    padding-left: .36rem;
    border-bottom: .005rem solid #DEDEDE;
    margin-bottom: .12rem;
    p {
      font-size: .14rem;
      color: #999999;
      line-height: .2rem;
      padding-bottom: .1rem;
      border-bottom: .02rem solid #fff;
      margin-right: .5rem;
      &.active {
        color: #157FFB;
        border-bottom-color: #157FFB;
        font-weight: bold;
      }
    }
  }
</style>
<script>
  export default {
    data () {
      return {
        filterList: [
          {'name': '最近', 'id': 0},   // id 对应后台数据，暂时写死
          {'name': '全部联系人', 'id': 1},
          {'name': '群聊', 'id': 2}
        ],
        filterSelect: 0
      }
    },
    mounted () {
      let val = this.$route.query.filterId
      this.filterSelect = val ? val : 0
    },
    methods: {
      // 搜索
      toSearch () {
        this.$router.push('/houseSearch')
      },
      /* 过滤 */
      filter (val) {
        this.filterSelect = val.id;
        this.$emit('filterSel', val.id) // 通知父组件，并传值
      }
    }
  }

</script>
